import React from 'react';
import { WeaTools, WeaTop, WeaProgress, WeaEchart } from 'ecCom';
import { Button, Modal, Rate, Tabs, Spin, Row, Col, Card, Form, Carousel } from 'antd';
import RiskRPItem from './RiskRPItem';


class RiskRP extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            datas: [],
            riskNames: [],
            riskNum: 0,
            width:0
        }
    }

    componentWillUnMount() {
        this.setState({ datas: [], riskNames: [], riskNum: 0 });
    }


    componentDidMount() {
        this.setState({width:document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs['Carousel']),null).width});
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.datas !== nextProps.datas) {
            this.reWriteDatas(nextProps.datas);
        }
    }

    shouldComponentUpdate(nextProps,nextState) {
        return (this.props.datas!=nextProps.datas);
    }
    //数据处理
    reWriteDatas = (datas) => {
        let riskNum = 0;
        let riskNames = [];
        for (let i = 0; i < datas.length; i++) {
            riskNum += Number(datas[i].riskNum);
            riskNames.push(datas[i].riskName);
        }
        const splitArrDatas = this.splitArr(datas, 5);
        this.setState({datas:splitArrDatas,riskNames: riskNames, riskNum: riskNum});
    }

    splitArr = (arr, size) => {    //切分数组，按照指定的数目长度
        let arr1 = [];
        for (let i = 0; i < arr.length; i = i + size) {
            let arr2 = arr;
            arr1.push(arr2.slice(i, i + size))
        }
        return arr1;
    }

    render() {
        const width = this.state.width;
        let dom = [];
        const riskNames = this.state.riskNames;
        const riskNum = this.state.riskNum;
        const datas = this.state.datas;
        const colors = [
            ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
            ['#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa'],
            ['#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050'],
            ['#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'],
            ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
            ['#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa'],
            ['#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050'],
            ['#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089']
        ]
        let listItems = [];
        if (datas && datas.length > 0) {
            datas.map((data,index) => {
                listItems.push(<div style={{ height: "190px" }}><RiskRPItem location={this.props.location} datas={data} riskNames={riskNames} riskNum={riskNum} color={colors[index]||[]}  width={width}/></div>);
            });
            const bl = datas.length > 1;
            dom.push(<Carousel autoplay={bl} dots={bl}>{listItems}</Carousel>)
        } else {
            dom.push(null);
        }

        return (<div ref="Carousel">{dom}</div>)
    }
}

export default RiskRP;